<template>
  <div id="userTopic">
    <div class="left-box">
      <!-- 左边头部 -->
      <div class="left_head_box">
        <router-link to="/user/dynamic" class="head_btn_box_link"><div class="head_btn_box"><span class="head_btn_box_p" :style="selectLeftHeadBtn==1 ? selectStyle : none">收藏</span></div></router-link>
        <router-link to="/user/article" class="head_btn_box_link"><div class="head_btn_box"><span class="head_btn_box_p" :style="selectLeftHeadBtn==2 ? selectStyle : none">文章</span></div></router-link>
        <router-link to="/user/follow" class="head_btn_box_link"><div class="head_btn_box"><span class="head_btn_box_p" :style="selectLeftHeadBtn==3 ? selectStyle : none">回答</span></div></router-link>
        <div class="head_btn_box_link">
          <div class="title" :style="selectLeftHeadBtn==4 ? selectStyle : none">更多</div>
          <div class="select-box">
            <div class="title-select-box">
              <router-link to="/user/topic" class="select-font">关注的话题</router-link>
            </div>
            <div class="title-select-box">
              <router-link to="/user/problem" class="select-font">关注的问题</router-link>
            </div>
            <div class="title-select-box">
              <router-link to="/user/topic" class="select-font">关注的收藏夹</router-link>
            </div>
            <div class="title-select-box">
              <router-link to="/user/topic" class="select-font">关注的专栏</router-link>
            </div>
          </div>
        </div>
        <!--<router-link to="/user/hotList" class="head_btn_box_link"><div class="head_btn_box"><span class="head_btn_box_p" :style="selectLeftHeadBtn==5 ? selectStyle : none">文章</span></div></router-link>-->
      </div>
      <div class="left-head-name"><strong>关注的话题</strong></div>
      <!-- 左边内容切换 -->
      <div class="left_body_box">
        <UserTopicCard v-for="(i, index) in list" :key="index" :cardList="i"></UserTopicCard>
      </div>
    </div>
  </div>
</template>
<script>
  import UserTopicCard from './userCard/UserTopicCard'
  export default {
    name: 'userTopic',
    components: {
      'UserTopicCard': UserTopicCard
    },
    data () {
      return {
        selectLeftHeadBtn: 4,
        selectStyle: {'color': '#0084ff'},
        list: [
          {'id': 1, 'title': '历史'},
          {'id': 2, 'title': 'NBA'},
          {'id': 3, 'title': '教育'},
          {'id': 4, 'title': '体育'}
        ]
      }
    },
    computed: {
    },
    methods: {
    }
  }
</script>
<style scoped>
  @import '../../../../../static/css/user/UserTopic.css';
</style>
